<template>
    <div>
        <Cascader :data="data" :load-data="loadData" v-model="addr" @on-change="change" style="width: 200px"></Cascader>
    </div>
</template>
<script>
import * as ApiCate from "@/api/myapi/Cate"
export default {
    data() {
        return {
            data: [], // 地区数据
            addr: [] // 已选数据
        };
    },
    props: ['cateId'],
    mounted() { },
    methods: {
        change(val, selectedData) { // 选择地区
            this.$emit('selected', [
                val,
                selectedData[selectedData.length - 1].__label.split('/')
            ]);
        },
        loadData(item, callback) { // 加载数据
            item.loading = true;
            // 查询它的子分类
            ApiCate.getCateTreeById(item.value).then(res => {
                if (res.data.obj <= 0) {
                    item.loading = false;
                } else {
                    res.data.obj.forEach((child) => {
                        item.loading = false;
                        let data = {
                            value: child.catId,
                            label: child.name,
                            loading: false,
                            children: []
                        };
                        if (child.catLevel == 3) {
                            item.children.push({
                                value: child.catId,
                                label: child.name
                            });
                        } else {
                            item.children.push(data);
                        }
                    });
                    callback();
                }
            });

        },
        async init() { // 初始化地图数据
            // let data = await getRegion(0);
            let data = await ApiCate.getIndexCateLevel1();

            let arr = [];
            data.data.obj.forEach((item) => {
                let obj = {
                    value: item.catId,
                    label: item.name,
                    loading: false,
                    children: []
                }

                arr.push(obj);
            });
            this.data = arr;
            // console.warn('init');
        },
        async reviewData() {
            let data = await ApiCate.getIndexCateLevel1();
            let arr0 = [];
            let arr1 = [];
            let arr2 = [];
            data.data.obj.forEach(item => {
                let obj = {
                    value: item.catId,
                    label: item.name,
                    loading: false,
                    children: []
                };
                arr0.push(obj);
            })

            let nowId = await ApiCate.getCateParentAndMerge(this.cateId);
            let addr = [
                nowId.data.obj[2].catId, nowId.data.obj[1].catId, nowId.data.obj[0].catId
            ]
            let length = addr.length;
            // 根据选择的数据来加载数据列表
            if (length > 0) {
                // let children = await getChildRegion(addr[0]);
                let children = await ApiCate.getCateTreeById(addr[0])
                children = this.handleData(children.data.obj);
                arr0.forEach((e) => {
                    if (e.value === addr[0]) {
                        e.children = arr1 = children;
                    }
                });
            }
            if (length > 1) {
                let children = await ApiCate.getCateTreeById(addr[1]);
                children = this.handleData(children.data.obj);
                arr1.forEach((e) => {
                    if (e.value === addr[1]) {
                        e.children = arr2 = children;
                    }
                });
            }
            if (length > 2) {
                let children = await ApiCate.getCateTreeById(addr[2]);
                children = this.handleData(children.data.obj);
                arr2.forEach((e) => {
                    if (e.value === addr[2]) {
                        e.children = children;
                    }
                });
            }
            this.addr = addr;
            this.data = arr0;
        },
        handleData(data) {
            // 处理接口数据
            let item = [];
            data.forEach((child) => {
                let obj = {
                    value: child.catId,
                    label: child.name,
                    loading: false,
                    children: []
                };

                if (child.catLevel == 3) {
                    item.push({
                        value: child.catId,
                        label: child.name
                    });
                } else {
                    item.push(obj);
                }
            });
            return item;
        }
    },
    watch: {
        cateId: {
            handler: function (v) {
                if (v) {
                    this.reviewData();
                } else {
                    this.init();
                }
            },
            immediate: true
        }
    }
};
</script>
<style scoped lang="scss">

</style>
  